<template>
	<view class="my-card">
		<view class="my-card-title">
			生活缴费
		</view>
		<view class="my-card-content">
			<view class="my-card-item" @click="handleClick(0)">
				<image src="/static/property/electricity.png" mode="widthFix"></image>
			</view>
			<view class="my-card-item" @click="handleClick(1)">
				<image src="/static/property/water.png" mode="widthFix"></image>
			</view>
			<view class="my-card-item" @click="handleClick(2)">
				<image src="/static/property/warm.png" mode="widthFix"></image>
			</view>
			<view class="my-card-item" @click="handleClick(3)">
				<image src="/static/property/property.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	const urls = [
		"http://o2o.xjznpt.cn/view/paymentslip/electricfee.html",
		"http://o2o.xjznpt.cn/view/paymentslip/waterfee.html",
		"http://o2o.xjznpt.cn/view/paymentslip/gasfee.html",
		"http://o2o.xjznpt.cn/view/property/propertycosts.html"
	];
	const handleClick = (index) => {
		uni.navigateTo({
			url: "/pages/webpage/webpage?url=" + encodeURIComponent(urls[index])
		})
	}
</script>

<style lang="scss" scoped>
	.my-card {
		background-color: #fff;
		padding: 10rpx 40rpx;

		.my-card-title {
			font-size: 36rpx;
			padding: 20rpx 0 40rpx;
		}

		.my-card-content {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			background-color: #fff;

			.my-card-item {
				width: 45%;
				margin: 10rpx 0 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				color: #fff;
				border-radius: 30rpx;

				image {
					width: 100%;
				}
			}
		}
	}
</style>